// import React from 'react'
// import { NavBar, Icon } from 'antd-mobile'
// import './index.scss'
// import { withRouter } from 'react-router-dom'

// // 导入props校验的包
// import PropTypes from 'prop-types'

// function NavHeader(props, { onLeftClick }) {
//   // 点击返回的默认行为
//   const defaultClick = () => props.history.go(-1)

//   return (
//     <NavBar
//       className="navbar"
//       mode="light"
//       icon={<Icon type="left" />}
//       onLeftClick={onLeftClick || defaultClick}
//     >{props.name}
//     </NavBar>
//   )
// }

// // 添加props校验
// NavHeader.propTypes = {
//   // children: PropTypes.string.isRequired,
//   onLeftClick: PropTypes.func
// }

// export default withRouter(NavHeader)

// 由于城市选择页和地图找房页面都用到了NavBar组件，遂将其封装

import React from 'react';

// 导入NavBar组件
import { NavBar } from 'antd-mobile';

// 导入高阶组件(高阶组件就是一个函数，接收的参数为普通组件，返回值为功能增强的组件)
import { withRouter } from 'react-router-dom';

// 导入样式
import styles from './index.module.scss';

// 导入prop-types
import PropTypes from 'prop-types';

// 不是由路由跳转而直接渲染的组件，其组件中无法获取到路由信息，需要高阶组件包裹，然后将路由信息通过props传递过去

const NavBarHeader = ({ children, history, className, rightContent }) => {
  // console.log(children, history);
  return (
    <NavBar
      className={[styles.NavBar, className || ''].join(' ')}
      mode="light"
      icon={<i className="iconfont icon-back" />}
      onLeftClick={() => history.go(-1)}
      rightContent={rightContent}
    >
      {children}
    </NavBar>
  );
};

// 添加props校验
NavBarHeader.propTypes = {
  children: PropTypes.string.isRequired,
  onLeftClick: PropTypes.func
};
export default withRouter(NavBarHeader);
